<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>事件监听</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="layui-container">
        <ul class="layui-nav layui-nav-tree" lay-shrink="all">
            <li class="layui-nav-item layui-this"><a href="javascript:;">导航1</a></li>
            <li class="layui-nav-item" lay-unselect><a href="javascript:;">导航2</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">有子元素</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子组件1</a></dd>
                    <dd class="layui-this"><a href="javascript:;">子组件2</a></dd>
                    <dd><a href="javascript:;">子组件3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">导航4</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子组件1</a></dd>
                    <dd class="layui-this"><a href="javascript:;">子组件2</a></dd>
                    <dd><a href="javascript:;">子组件3</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;">导航5</a></li>
        </ul>


        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
            <ul class="layui-tab-content">
                <li class="layui-tab-item">选项一内容</li>
                <li class="layui-tab-item layui-show">选项二内容</li>
                <li class="layui-tab-item">选项三内容</li>
                <li class="layui-tab-item">选项四内容</li>
            </ul>

        </div>

        <div class="layui-tab" lay-allowClose="true" lay-filter="tabSelect">
            <ul class="layui-tab-title">
                <li>选项一</li>
                <li class="layui-this">选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
            <ul class="layui-tab-content">
                <li class="layui-tab-item">选项一内容</li>
                <li class="layui-tab-item layui-show">选项二内容</li>
                <li class="layui-tab-item">选项三内容</li>
                <li class="layui-tab-item">选项四内容</li>
            </ul>

        </div>
    </div>
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">

        var element = layui.element;
        element.on("tab", function (data){
            console.log("tab容器", data.elem);
            console.log("被点击的选项卡的下标", data.index);
        })

        element.on("tabDelete", function (data){
            console.log(data, "删除事件");
        })

        // 具体到元素的点击事件监听
        element.on("tab(tabSelect)", function (){
            console.log("监听具体的元素事件");
        })

        element.on("nav", function (elem){
            console.log("被点击的$元素", elem);
        })
    </script>
</body>

</html>